import React, { Component } from 'react'
import styles from './index.less'
import GroupDetailView from './detail'
import { Table, Icon, Input, Button, Modal, Divider, DatePicker } from 'antd';
import { connect } from 'dva'
import moment from 'moment';
moment.locale('zh-cn');

@connect(({ smsTheme, loading }) => ({ 
    smsThemeList: smsTheme.smsThemeList,
    smsThemeListPage: smsTheme.smsThemeListPage,
    smsThemeListTotal: smsTheme.smsThemeListTotal,
    fetchSelSmsThemeForMyLoading: loading.effects['smsRecord/fetchSelSmsThemeForMy'],
}))
export default class GroupSendingView extends Component {

    columns = [{
        title: '主题',
        dataIndex: 'theme',
        key: 'theme',
      },{
        title: '内容',
        dataIndex: 'context',
        key: 'context',
        render: (context) =>{
            if(!context){
                return context
            }
            if(context.length>20){
                return context.substring(0,20)
            }
            return context
        }
      },{
        title: '发送状态',
        dataIndex: 'status',
        key: 'status',
        render: (status, record) =>{
            let state
            if(status === 0){
                state = "未发送"
            }
            if(status === 1){
                state = "发送中"
            }
            if(status === 2){
                state = "已发送"
            }
            return state
        }
      },{
        title: '发送时间',
        dataIndex: 'createTime',
        key: 'createTime',
        render: (createTime, record) =>{
            if(createTime){
                return moment(createTime).format('YYYY-MM-DD HH:mm:ss');
            }
        }
      },{
        title: '操作',
        key: 'action',
        render: (text, record) =>(
        <div>
          <span>
            <a href="javascript:;" onClick = {()=>{
                const { dispatch } = this.props
                    this.setState({
                        selectedGroupId: record.id,
                        modalIsShow: true
                    });
                }}>详情</a>
          </span>
        </div>
        ),
      }];

    state = {
        modalIsShow: false,
        selectedGroupId: null,
        theme: '',
        userName: ''
    }

    setPage = (e) =>{
        const { dispatch } = this.props
        const {
            theme, 
        } = this.state
        dispatch({
            type: 'smsTheme/fetchSelSmsThemeForMy',
            payload: {
                page: e,
                theme: theme,
   
            }
        })
    }

    onChangeTheme = (e)=>{
        this.setState({
            theme: e.target.value
        })

    }

    handleOk = ()=>{
        this.setState({
            modalIsShow: false
        })
    }

    handleCancel = ()=>{
        this.setState({
            modalIsShow: false
        })
    }

    render() {
        const { selectedGroupId, theme, userName } = this.state
        const { dispatch, smsThemeList, smsThemeListPage, fetchSelSmsThemeForMyLoading, smsThemeListTotal } = this.props
        console.log(smsThemeList)
        return (
            <div>
                <div className = {styles.query}>
                    <div className = {styles.search}>
                        <Input
                            className = {styles.input}
                            placeholder="主题"
                            prefix={<Icon type="profile" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            onChange={this.onChangeTheme}
                        />
                        <Input
                            className = {styles.input}
                            placeholder="用户名"
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            onChange={this.onChangeUserName}
                        />
                        <Button 
                            className = {styles.btn}
                            type="primary"
                            onClick = {()=>{
                                const { dispatch } = this.props
                                const {
                                    theme, userName,
                                } = this.state
                                dispatch({
                                    type: 'smsTheme/fetchSelSmsThemeForMy',
                                    payload: {
                                        page: 1,
                                        theme: theme,
                                    }
                                })
                            }}>查询</Button>
                    </div>
                </div>
                <Divider />
                <div className = {styles.content}>
                    <Table 
                        loading={fetchSelSmsThemeForMyLoading}
                        columns={this.columns} 
                        dataSource={smsThemeList}
                        pagination = {{
                            current: smsThemeListPage,
                            total: smsThemeListTotal,
                            onChange: this.setPage
                        }} />
                </div>
                <GroupDetailView pState = {this.state} handleOk = {this.handleOk} handleCancel={this.handleCancel}/>
            </div>
        )
    }

    componentDidMount(){
        const { dispatch } = this.props
        dispatch({
            type: 'smsTheme/fetchSelSmsThemeForMy',
            payload: {page: this.props.smsThemeListPage}
        })
    }


}
